import styled from 'styled-components'
// 轮播
export const Viewpager = styled.div`
    width:625px;
    height:270px;
    .banner-img{
        width:625px;
        height:270px;
    }  
`
// home
export const HomeWrapper = styled.div`
    width:960px;
    margin:0 auto;
    overflow:hidden;

`
export const HomeLeft = styled.div`
    margin-left:15px;
    padding-top:30px;
    width:625px;
    float:left;

`
export const HomeRight = styled.div`
    width:280px;
    float:right;
`  
export const TopicWrapper = styled.div`
    padding:20px 0 10px 0;
    overflow:hidden;
    margin-left:-10px;
    border-bottom:1px solid #dcdcdc;
    margin-bottom:10px;
`
export const TopicItem =styled.div`
        line-height:32px;
        margin-left:10px;
        height:32px;
        font-size:14px;
        float:left;
        background:#f7f7f7;
        color: #000;
        border:1px solid #dcdcdc;
        border-radius:4px;
        padding-right:10px;
        margin-bottom:10px;
    .TopicImg{
        height:32px;
        width: 32px;
        display: block;
        float:left;
        margin-right:10px;
    }
`
export const ListWrapper =styled.div`
    overflow:hidden;
    margin-left:-10px;
`
export const Listitem = styled.div`
    float:left;
    border-bottom:1px solid #dcdcdc;
    padding:15px 2px 20px 0;
    margin-bottom:15px;
    .ImgClass{
        float:right;
        width:150px;
        height:100px;
        border-radius:3px;
    }
    .H1Class{
        font-size:18px;
        margin:-7px 0 4px;
        line-height:1.5;
        font-weight:700;
    }
    .PClass{
        margin:0 0 8px;
        font-size:13px;
        line-height:24px;
        color: #999;
    }
`
export const LikeWrapper = styled.div`
    overflow:hidden;
    font-size:12px;
    font-weight:400;
    line-height:20px;
    color: #999;
    .LiItem{
        float:left;
        list-style:none;
        margin-right:10px;
    }
`
export const RecommerWrapper =styled.div`
    margin-top:26px;
    padding-bottom:4px;
    min-height:228px;
    width:280px;
`
export const RecommerItem = styled.div`
    width: 280px;
    height: 50px;
    background:url(${(props)=>props.imgUrl});
    background-size:100% 100%;
    margin-bottom:6px;
    border-radius:4px;
`
// 二维码识别位置
export const WriterWapper = styled.div`
    position:relative;
    display:inline-block;
    width:100% ;
    padding: 10px 22px;
    height:80px;
    margin-bottom:30px;
    border-radius:6px;
    border:1px solid #f0f0f0;
    margin-bottom:20px;
    .qrcode{
        width: 60px;
        height:60px;
        opacity:.85;
        vertical-align: middle
    }
    .info{
        display:inline-block;
        margin-left:7px;
        vertical-align: middle;
    }
    .title{
        font-size:15px;
        color: #333;
    }
    .descriotion{
        margin-top:4px;
        font-size:13px;
        color: #999;
    }
`

export const PopoverWapper = styled.div`
    position:absolute;
    bottom: 90px;
    left:40px;
    width:184px;
    height: 184px;
    border:1px solid #969696;
    border-radius:4px;
    padding:10px;
    background:white;
`
export const ImgPhoto = styled.div`
    
    img{
        
        width: 160px;
        height: 160px;
    }
`
//writer

export const WriterWapperTwo = styled.div`
    span{
        font-size:14px;
        color: #969696;
        margin-bottom:10px;
    }
    .change{
        float:right;
        font-size:14px;
        color: #969696;
        text-decoration:none;
        margin-bottom:10px;
        display: block;
    }
`
export const WriterItem = styled.div`
    margin-top:15px;
    height:48px;
    .namePhoto{
        border-radius:50%;
        width: 48px;
        height:48px;
        border:1px solid #ddd;
        float:left;
        margin-right:10px;
        vertical-align: middle
    }
    .name{
        margin-right:60px;
        font-size:14px;
        display: block;
        text-decoration:none;
        color: #000;
    }
    .writer{
        margin-top:6px;
        font-size:12px;
        color: #969696;
        vertical-align: middle
    }
    .attention{
        float:right;
        margin-top:-25px;
        padding:0;
        font-size:13px;
        color:#42c02e;
    }
`
export  const LoadMore = styled.div`
    width: 100%;
    height: 40px;
    margin:30px auto 60px;
    padding: 10px 15px;
    color: #fff;
    background:#a5a5a5;
    border-radius:20px;
    font-size:15px;
    text-align:center;
    cursor:pointer;
`
export const WriterBotton =styled.div`
    width:100% ;
    height: 40px;
    color: #787878;
    background-color: #f7f7f7;
    border: 1px solid #dcdcdc;
    padding: 7px 7px 7px 12px;
    margin-top:20px;
    font-size:13px;
    text-align:center;
    border-radius:4px;
    line-height:24px;
`



export const GoTop = styled.div`
    position:fixed;
    width:50px;
    height: 50px;
    right:100px;
    bottom: 100px;
    border-radius:4px;
    border:1px solid #f0f0f0;
    font-size:10px;
    text-align:center;
    line-height:50px;
`


